<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<myheader :leftType="2" leftUrl="/pages/my/index" :noLeft="false" showTitle="体态档案" showBackground="#EAECEF">
		</myheader>
		<!-- #endif -->
		<view class="content">
			<view v-if="dataList.length==0" class="nodatabox">
				<view style="color:#2E4964;text-align: center;font-size: 20px;">无体态特征信息</view>
				<view style="margin-top: 10px;color:#8292A2;text-align: center;font-size: 14px;">
					隐私数据仅用于向您提供服务使用,您可随时删除这些数据</view>
			</view>
			<view v-if="dataList.length>0">
				<view v-for="item in dataList"
					style="display: flex;justify-content: flex-start;align-items: center; padding: 10px 10px 10px 10px; margin-bottom: 10px;height: 76px;border-radius: 5px;background-color: white;">
					<view style="width:56px;height: 56px;margin-right: 20rpx;">
						<image src="../../static/logo2.svg" mode="scaleToFill"
							style="height: 56px;width: 56px;border-radius: 5px;"
							v-if="item.profilePhoto==''||item.profilePhoto==null" />
						<image :src="item.profilePhoto" mode="scaleToFill"
							style="height: 56px;width: 56px;border-radius: 5px;" v-else />
					</view>
					<view style="flex-grow: 1;">
						<view
							style="display: flex;justify-content: flex-start;align-items: center; height: 28px;font-size: 16px;font-weight: 700;color:#2E4964">
							<view>{{item.name}}</view>
						</view>
						<view
							style="display: flex;justify-content: flex-start;align-items: center; height: 28px;font-size: 16px;font-weight: 400;color:#1ABC9C">
							<view style="display: inline-block;font-weight:400;padding-right: 10px;border-right: 1px solid #EAECEF;"
								@click="goDetail('detail',item)">详情
							</view>
							<view style="display: inline-block;font-weight:400;padding-left: 10px;padding-right: 10px;"
								@click="updateDetail(item)">更新</view>
							<view style="display: inline-block;font-weight:400;padding-left: 10px;border-left:1px solid #EAECEF;"
								@click="deleteData(item)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="createbox" style="display: flex;justify-content: center;align-items: center;"
					@click="showCreateInfo()">
					<view>+ 创建体态档案</view>
				</view>
			</view>
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view
					style="height: 503px;padding-left: 10px;padding-right:10px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;">
					<view>
						<view style="margin-top: 10px;display: flex;justify-content: flex-start;align-items: center;">
							<view style="min-height: 40px;">
								<view style="font-size:16px;font-weight: 700;color: #2E4964;">
									智能推荐需要提供以下信息
								</view>
								<view style="font-weight: 400; font-size: 12px;color: #8292A2;margin-top: 5px;">
									隐私数据仅用于向您提供服务使用,您可随时删除这些数据
								</view>
							</view>
							<view
								style="padding:10px 20px 0px 0px;min-width: 30px;height: 45px;flex-grow: 1;text-align: right;">
								<view style="display: inline-block;cursor:pointer;color: red;"
									@click="closeCreateInfo()">取消
								</view>
							</view>
						</view>
						<scroll-view :scroll-x="true" :scrollbar="false" :scroll-into-view="scrollViewId"
							style="margin-top: 5px;white-space: nowrap;">
							<view id="addItemId0" :class="nowEditItemIndex==0?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(0)">名称</view>
							<view id="addItemId1" :class="nowEditItemIndex==1?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(1)">头像</view>
							<view id="addItemId2" :class="nowEditItemIndex==2?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(2)">性别</view>
							<view id="addItemId3" :class="nowEditItemIndex==3?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(3)">年龄</view>
							<view id="addItemId4" :class="nowEditItemIndex==4?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(4)">身高</view>
							<view id="addItemId5" :class="nowEditItemIndex==5?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(5)">体重</view>
							<view id="addItemId6" :class="nowEditItemIndex==6?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(6)">腰围</view>
							<view id="addItemId7" :class="nowEditItemIndex==7?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(7)">民族</view>
							<view id="addItemId8" :class="nowEditItemIndex==8?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(8)">宗教信仰</view>
							<view id="addItemId9" :class="nowEditItemIndex==9?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(9)">喜好味型</view>
							<view id="addItemId10" :class="nowEditItemIndex==10?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(10)">喜好烹饪方式</view>
							<!-- 							<view id="addItemId11" :class="nowEditItemIndex==11?'addItemTagSelect':'addItemTag'"
								@click="showEditItemIndex(11)">过敏源</view> -->
						</scroll-view>
						<view style="margin-top: 10px;font-size:16px;box-sizing: border-box;">
							<view v-if="nowEditItemIndex==0">
								<view>
									<uni-easyinput v-model="addItem.name" placeholder="请输入,例:我,爸爸,妈妈"
										style="height: 44px;"></uni-easyinput>
								</view>
							</view>
							<view v-if="nowEditItemIndex==1">
								<view
									style="height: 140px;background-color: #F4F6F7;display: flex;justify-content: flex-start;align-items: center;padding: 0px 5px 0px 5px;">
									<view style="width: 100px;height: 100px;overflow: hidden;">
										<image src="../../static/logo2.svg" mode="scaleToFill"
											style="height: 100px;width: 100px;margin-right: 20rpx;"
											v-if="addItem.profilePhoto==''||addItem.profilePhoto==null" />
										<image :src="addItem.profilePhoto" mode="scaleToFill"
											style="height: 100px;width: 100px;margin-right: 20rpx;" v-else />
									</view>
									<view
										style="display: flex; justify-content: flex-start;align-items: center; flex-grow: 1;height: 100px;margin-left: 15px;color:#1ABC9C;font-size:16px;font-weight:700;flex-wrap: wrap;">
										<view
											style="width:100%; padding-bottom: 20px;border-bottom: 2px solid #EAECEF;">
											<span @click="paizhao()">拍照</span>
										</view>
										<view style="width:100%;margin-top: 5px;">
											<span @click="xiangce()">从手机相册选择</span>
										</view>
									</view>
								</view>
							</view>
							<view v-if="nowEditItemIndex==2">
									<view v-for="sexItem in sexOptionList" style="display: inline-block;"
										@click="selectSex(sexItem.value)">
										<view class="itemSelectTag" v-if="sexItem.value==addItem.gender">
											<image src="../../static/xuanzhong1.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{sexItem.text}}</view>
										</view>
										<view class="itemNoSelectTag" v-if="sexItem.value!=addItem.gender">
											<image src="../../static/weixuanzhong.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{sexItem.text}}</view>
										</view>
									</view>
							</view>
							<view v-if="nowEditItemIndex==3">
								<uni-easyinput type="number" v-model="addItem.age"
									placeholder="请输入,例30岁"></uni-easyinput>
							</view>
							<view v-if="nowEditItemIndex==4">
								<uni-easyinput type="number" v-model="addItem.height"
									placeholder="请输入,例172厘米"></uni-easyinput>
							</view>
							<view v-if="nowEditItemIndex==5">
								<uni-easyinput type="digit" v-model="addItem.weight"
									placeholder="请输入,例65公斤"></uni-easyinput>
							</view>
							<view v-if="nowEditItemIndex==6">
								<uni-easyinput type="number" v-model="addItem.waistline"
									placeholder="请输入,例120厘米"></uni-easyinput>
							</view>
							<view v-if="nowEditItemIndex==7">
								<scroll-view :scroll-y="true" :scrollbar="false"
									style="display: flex;flex-wrap: wrap;height:300px">
									<view v-for="nationItem in nationOptionList" style="display: inline-block;"
										@click="selectNation(nationItem.value)">
										<view class="itemSelectTag" v-if="nationItem.value==addItem.nation">
											<image src="../../static/xuanzhong1.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{nationItem.text}}</view>
										</view>
										<view class="itemNoSelectTag" v-if="nationItem.value!=addItem.nation">
											<image src="../../static/weixuanzhong.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{nationItem.text}}</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view v-if="nowEditItemIndex==8 && religionOptionList.length > 0">
								<scroll-view :scroll-y="true" :scrollbar="false"
									style="display: flex;flex-wrap: wrap;height:300px">
									<view v-for="relegionItem in religionOptionList" style="display: inline-block;"
										@click="selectRelegion(relegionItem.value,relegionItem.text)">
										<view class="itemSelectTag"
											v-if="Array.from(addItem.faith,(item)=>item.id).indexOf(relegionItem.value)>-1">
											<image src="../../static/xuanzhong1.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{relegionItem.text}}</view>
										</view>
										<view class="itemNoSelectTag" v-else>
											<image src="../../static/weixuanzhong.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{relegionItem.text}}</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view v-if="nowEditItemIndex==9">
								<scroll-view :scroll-y="true" :scrollbar="false"
									style="display: flex;flex-wrap: wrap;height:300px">
									<view v-for="tasteItem in tasteOptionList" style="display: inline-block;"
										@click="selectTaste(tasteItem.value,tasteItem.text)">
										<view class="itemSelectTag"
											v-if="Array.from(addItem.perferTaste,(item)=>item.id).indexOf(tasteItem.value)>-1">
											<image src="../../static/xuanzhong1.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{tasteItem.text}}</view>
										</view>
										<view class="itemNoSelectTag" v-else>
											<image src="../../static/weixuanzhong.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{tasteItem.text}}</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view v-if="nowEditItemIndex==10">
								<scroll-view :scroll-y="true" :scrollbar="false"
									style="display: flex;flex-wrap: wrap;height:300px">
									<view v-for="cookItem in cookTypeOptionList" style="display: inline-block;"
										@click="selectCookType(cookItem.value,cookItem.text)">
										<view class="itemSelectTag"
											v-if="Array.from(addItem.preferCooking,(item)=>item.id).indexOf(cookItem.value)>-1">
											<image src="../../static/xuanzhong1.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{cookItem.text}}</view>
										</view>
										<view class="itemNoSelectTag" v-else>
											<image src="../../static/weixuanzhong.svg" style="width:20px;height:20px;margin-right:4px" />
											<view style="display:inline-block">{{cookItem.text}}</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view v-if="nowEditItemIndex==11">
								11
							</view>
						</view>
					</view>
					<view style="margin-bottom:80px;color:#1ABC9C;font-size:16px;margin-top:0%0px">
						<uni-row>
							<uni-col :span="12">
								<view style="text-align: left;min-width: 1px;min-height: 1px;">
									<view style="margin-left: 40px;margin-top:10px" v-if="nowEditItemIndex!=0" @click="preAddItem()">
										←上一页
									</view>
								</view>
							</uni-col>
							<uni-col :span="12">
								<view style="text-align: right;">
									<view style="margin-right: 40px;margin-top:10px" v-if="nowEditItemIndex!=10"
										@click="nextAddItem()">
										跳过/下一页→
									</view>
									<view style="margin-right: 40px;margin-top:10px" v-if="nowEditItemIndex==10" @click="saveData()">
										保存
									</view>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</uni-popup>
		</view>
		<!-- <mytabbar :active="3" :count="0"></mytabbar> -->
	</view>
</template>

<script>
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	import config from '../../utils/config.js';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				dataList: [],
				nowEditItemIndex: 0,
				sexOptionList: [],
				nationOptionList: [],
				religionOptionList: [],
				tasteOptionList: [],
				cookTypeOptionList: [],
				scrollViewId: "addItemId0",
				addItem: {
					"name": "",
					"profilePhoto": "",
					"gender": 0,
					"age": "",
					"height": "",
					"weight": "",
					"waistline": "",
					"nation": 0,
					"faith": [],
					"perferTaste": [],
					"preferCuisine": [],
					"preferCooking": [],
					"allergySource": [],
				}
			}
		},
		onShow() {
			this.initData();
			this.getDataList();
		},
		mounted() {},
		methods: {
			
			goDetail(modifyType,item){
				uni.navigateTo({
					url: "/pages/my/physiqueArchivesDetail?modifyType="+modifyType+"&physiqueArchiveid="+item.id
				})
			},
			deleteData(item) {
				uni.showToast({
					title: "正在删除",
					icon: "none"
				});
				this.$H.put("portal/posture/del?id=" + item.id).then(res => {
					if (res.code == 0) {
						this.getDataList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				})
			},
			saveData() {
				if (this.addItem.name.trim() == "") {
					uni.showToast({
						title: "请填写名称",
						icon: "none"
					});
					return
				}
				if (this.addItem.profilePhoto.trim() == "") {
					uni.showToast({
						title: "请上传头像",
						icon: "none"
					});
					return
				}
				if (this.addItem.gender == 0) {
					uni.showToast({
						title: "请选择性别",
						icon: "none"
					});
					return
				}
				if ((this.addItem.age+'').trim() == "") {
					uni.showToast({
						title: "请填写年龄",
						icon: "none"
					});
					return
				}
				if ((this.addItem.height+'').trim() == "") {
					uni.showToast({
						title: "请填写身高",
						icon: "none"
					});
					return
				}
				if ((this.addItem.weight+'').trim() == "") {
					uni.showToast({
						title: "请填写体重",
						icon: "none"
					});
					return
				}
				if ((this.addItem.waistline+'').trim() == "") {
					uni.showToast({
						title: "请填写腰围",
						icon: "none"
					});
					return
				}
				if (this.addItem.nation == 0) {
					uni.showToast({
						title: "请选择民族",
						icon: "none"
					});
					return
				}
				let postData = {
					"name": this.addItem.name,
					"profilePhoto": this.addItem.profilePhoto,
					"gender": this.addItem.gender,
					"age": Number(this.addItem.age),
					"height": Number(this.addItem.height),
					"weight": Number(this.addItem.weight),
					"waistline": Number(this.addItem.waistline),
					"nation": this.addItem.nation,
					"faith": this.addItem.faith,
					"perferTaste": this.addItem.perferTaste,
					"preferCuisine": this.addItem.preferCuisine,
					"preferCooking": this.addItem.preferCooking,
					"allergySource": this.addItem.allergySource,
				}
				uni.showLoading({
					title: '正在保存...',
					mask: true
				}); // 显示加载提示
				if (this.addItem.userId) {
					postData.userId = this.addItem.userId
					postData.id = this.addItem.id
					this.$H.put("portal/posture/edit", postData).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							uni.showToast({
								title: "更新成功",
								icon: "none"
							});
							this.getDataList();
							this.closeCreateInfo();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
					})
				} else {

					this.$H.put("portal/posture/add", postData).then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							uni.showToast({
								title: "保存成功",
								icon: "none"
							});
							this.getDataList();
							this.closeCreateInfo();
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
					})
				}
			},
			initData() {
				this.sexOptionList = [];
				for (let i = 0; i < config.sexOptionList.length; i++) {
					if (i < 2) {
						this.sexOptionList.push({
							"value": config.sexOptionList[i].value,
							"text": config.sexOptionList[i].name
						})
					}
				}
			},
			getDataList() {
				uni.showLoading({
					title: '正在加载...',
					mask: true
				}); // 显示加载提示
				this.$H.get("portal/posture/searchPostures").then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.dataList = res.data;
					}
				});
			},
			getAddItemData() {
				if (this.nowEditItemIndex == 7) { //民族
					if (this.nationOptionList.length == 0) {
						this.$H.postToB("manage/basic/searchRace").then(res => {
							if (res.code == 0) {
								for (let i = 0; i < res.data.length; i++) {
									this.nationOptionList.push({
										"value": res.data[i].id,
										"text": res.data[i].nationName
									})
								}
								this.$forceUpdate();
							}
						})
					}
				}
				if (this.nowEditItemIndex == 8) { //宗教信仰
					if (this.religionOptionList.length == 0) {
						this.$H.postToB("manage/basic/searchReligion").then(res => {
							if (res.code == 0) {
								console.log(res, 'res-----')
								for (let i = 0; i < res.data.length; i++) {
									this.religionOptionList.push({
										"value": res.data[i].id,
										"text": res.data[i].sect ? res.data[i].name + "-" + res.data[i].sect: res.data[i].name
									})
								}
								console.log(this.religionOptionList, 'this.religionOptionList---')
								this.$forceUpdate();
							}
						})
					}
				}
				if (this.nowEditItemIndex == 9) {
					if (this.tasteOptionList.length == 0) {
						this.$H.getToB("manage/basic/getAllTastes").then(res => {
							if (res.code == 0) {
								for (let i = 0; i < res.data.length; i++) {
									this.tasteOptionList.push({
										"value": Number(res.data[i].id),
										"text": res.data[i].name
									})
								}
								this.$forceUpdate();
							}
						})
					}
				}
				if (this.nowEditItemIndex == 10) {
					if (this.cookTypeOptionList.length == 0) {
						this.$H.postToB("manage/basic/getAllCookings").then(res => {
							if (res.code == 0) {
								for (let i = 0; i < res.data.length; i++) {
									this.cookTypeOptionList.push({
										"value": res.data[i].id,
										"text": res.data[i].name
									})
								}
								this.$forceUpdate();
							}
						})
					}
				}
			},
			updateDetail(item) {
				this.nowEditItemIndex = 0;
				this.scrollViewId = "addItemId0";
				console.log(item, 'item---')
				this.addItem = Object.assign(this.addItem, item)
				this.$forceUpdate();
				this.$refs.popup.open();
				this.getAddItemData();
			},
			showCreateInfo() {
				this.nowEditItemIndex = 0;
				this.scrollViewId = "addItemId0";
				this.addItem = {
					"name": "",
					"profilePhoto": "",
					"gender": 0,
					"age": "",
					"height": "",
					"weight": "",
					"waistline": "",
					"nation": 0,
					"faith": [],
					"perferTaste": [],
					"preferCuisine": [],
					"preferCooking": [],
					"allergySource": [],
				}
				this.$forceUpdate();
				this.$refs.popup.open();
				this.getAddItemData();
			},
			closeCreateInfo() {
				this.$refs.popup.close();
			},
			showEditItemIndex(index) {
				this.nowEditItemIndex = index;
				this.getAddItemData();
			},
			preAddItem() {
				if (this.nowEditItemIndex > 0) {
					this.nowEditItemIndex = this.nowEditItemIndex - 1
					this.scrollViewId = "addItemId" + this.nowEditItemIndex.toString();
					this.getAddItemData();
				}
			},
			nextAddItem() {
				if (this.nowEditItemIndex < 11) {
					this.nowEditItemIndex = this.nowEditItemIndex + 1;
					this.scrollViewId = "addItemId" + this.nowEditItemIndex.toString();
					this.getAddItemData();
				}
			},
			paizhao() {
				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '正在上传...',
							mask: true
						}); // 显示加载提示
						let filePath = res.tempFilePaths[0];
						let url = config.domainToB + 'manage/generic/pic/upload';
						uni.uploadFile({
							header: {
								"token": _this.$store.state.token
							},
							name: "file",
							filePath: filePath,
							url: url, // 服务器接口地址
							success(res2) {
								uni.hideLoading(); // 隐藏加载提示
								let resData = JSON.parse(res2.data);
								if (resData.code == 0) {
									uni.showToast({
										title: "上传成功",
										icon: "none"
									});
									_this.addItem.profilePhoto = resData.data;
									// _this.$forceUpdate();
								} else {
									uni.showToast({
										title: "上传失败",
										icon: "none"
									});
								}
							},
							fail(err) {
								uni.hideLoading(); // 隐藏加载提示
								uni.showToast({
									title: "上传失败",
									icon: "none"
								});
							}
						})
					}
				});
			},
			xiangce() {
				let _this=this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						uni.showLoading({
							title: '正在上传...',
							mask: true
						}); // 显示加载提示
						let filePath = res.tempFilePaths[0];
						let url = config.domainToB + 'manage/generic/pic/upload';
						uni.uploadFile({
							header: {
								"token": _this.$store.state.token
							},
							name: "file",
							filePath: filePath,
							url: url, // 服务器接口地址
							success(res2) {
								uni.hideLoading(); // 隐藏加载提示
								let resData = JSON.parse(res2.data);
								if (resData.code == 0) {
									uni.showToast({
										title: "上传成功",
										icon: "none"
									});
									_this.addItem.profilePhoto = resData.data;
									// _this.$forceUpdate();
								} else {
									uni.showToast({
										title: "上传失败",
										icon: "none"
									});
								}
							},
							fail(err) {
								uni.hideLoading(); // 隐藏加载提示
								uni.showToast({
									title: "上传失败",
									icon: "none"
								});
							}
						})
					}
				});
			},
			selectSex(id) {
				this.addItem.gender = id
				this.$forceUpdate();
			},
			selectNation(id) {
				this.addItem.nation = id;
				this.$forceUpdate();
			},
			selectRelegion(id, name) {
				let selectIndex = -1;
				for (let i = 0; i < this.addItem.faith.length; i++) {
					if (this.addItem.faith[i]["id"] == id) {
						selectIndex = i;
						break
					}
				}
				if (selectIndex != -1) {
					this.addItem.faith.splice(selectIndex, 1);
				} else {
					this.addItem.faith.push({
						"id": id,
						"name": name
					})
				}
				this.$forceUpdate();
			},
			selectTaste(id, name) {
				let selectIndex = -1;
				for (let i = 0; i < this.addItem.perferTaste.length; i++) {
					if (this.addItem.perferTaste[i]["id"] == id) {
						selectIndex = i;
						break
					}
				}
				if (selectIndex != -1) {
					this.addItem.perferTaste.splice(selectIndex, 1);
				} else {
					this.addItem.perferTaste.push({
						"id": id,
						"name": name
					})
				}
				this.$forceUpdate();
			},
			selectCookType(id, name) {
				let selectIndex = -1;
				for (let i = 0; i < this.addItem.preferCooking.length; i++) {
					if (this.addItem.preferCooking[i]["id"] == id) {
						selectIndex = i;
						break
					}
				}
				if (selectIndex != -1) {
					this.addItem.preferCooking.splice(selectIndex, 1);
				} else {
					this.addItem.preferCooking.push({
						"id": id,
						"name": name
					})
				}
				this.$forceUpdate();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0px 10px 0px 10px;
	}

	.nodatabox {
		padding: 0px 30px 0px 30px;
		border-radius: 5px;
		height: 112px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
	}

	.createbox {
		margin-top: 10px;
		height: 54px;
		border-radius: 5px;
		background-color: white;
		color: #1ABC9C;
		font-size: 16px;
		font-weight: 700;
	}

	.addItemTag {
		display: inline-block;
		color: #1ABC9C;
		padding-left: 10px;
		font-size: 16px;
	}

	.addItemTagSelect {
		display: inline-block;
		color: #2E4964;
		padding-left: 10px;
		font-size: 20px;
		font-weight: 700;
	}

	.itemSelectTag {
		display: inline-flex;
		align-items: center;
		justify-content: space-around;
		padding: 6px;
		background-color: #1ABC9C;
		border-radius: 10px;
		color: white;
		font-size: 16px;
		font-weight: 700;
		margin-top: 4px;
		margin-right: 10px;

	}

	.itemNoSelectTag {
		display: inline-flex;
		align-items: center;
		justify-content: space-around;
		padding: 6px;
		background-color: white;
		border-radius: 10px;
		color: #1ABC9C;
		font-size: 16px;
		font-weight: 700;
		margin-right: 10px;
		margin-top: 4px;
		border: 1px solid #1ABC9C;
	}

	/deep/ .uni-easyinput__content {
		padding: 10px 10px 10px 10px;
		border-radius: 10px;
		font-size: 16px;
		font-weight: 700;
		color: #2E4964;
	}

	/deep/ .uni-easyinput__placeholder-class {
		font-size: 16px;
		font-weight: 700;
		color: #2E4964;
	}

	/deep/ .uni-select {
		padding-top: 25px;
		padding-bottom: 25px;
		padding-right: 10px;
		border-radius: 10px;
	}

	/deep/.uni-select__selector-item {
		font-size: 16px;
	}

	/deep/ .uni-select__input-text {
		font-size: 16px;
		font-weight: 700;
		color: #2E4964;
	}

	/deep/ .uni-select__input-placeholder {
		font-size: 16px;
		font-weight: 700;
		color: #2E4964;
	}
</style>